<template>
    <fieldset>
        <legend>Product</legend>
        <h2>{{$store.state.Product.name}}</h2>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>商品:{{item.title}}</b>
                ---
                <b>单价:{{item.price}}</b>
                ---
                <b>库存:{{item.inventory}}</b>
                ---
                <button :disabled="item.inventory===0" @click="add(item)">加入购物车</button>          
            </li>
        </ul>
    </fieldset>
</template>
<script>
    import { mapMutations,mapActions,mapState } from 'vuex';
    export default{
        mounted () {
            //访问模块化Product中的mutation
            // this.$store.commit("Product/SET_PRODUCT",999);
            //访问模块化Cart中的actions
            // this.$store.dispatch('Cart/SET_PRODUCT', payload)

            // this.SET_PRODUCT()
            this.FETCH_PRODUCT();
        },
        computed: {
            ...mapState('Product', ['products'])
        },
        methods: {  
            // ...mapMutations("Product",['SET_PRODUCT']),
            ...mapMutations("Product",['DECREASE_INVENTORY']),
            ...mapActions("Product",['FETCH_PRODUCT']),
            ...mapMutations('Cart',['SET_CART']),

            ...mapActions('Cart',['ADD_TO_CART']),
            add(item){
                //
                // this.SET_CART(item)
                // this.DECREASE_INVENTORY(item)
            
                this.ADD_TO_CART(item)
            }
        }
    }
</script>